<template>
  <div class="ar">
    <div class="ar-space"></div>
    <div class="ar-space">
      <div class="tip">一、设置请求方式</div>
      <api-method-select ref="apiMethodSel" :method="method" />
      <div class="tip">
        二、设置请求地址 (1<a> ./ </a> 、 2<a> / </a> 、3<a> http://xx</a> 、
        4<a target="_blank"> https://xx</a>)
      </div>
      <api-url-select ref="apiUrlSel" @reload="getRequeryUrl" />
    </div>
    <div class="ar-space">
      请求地址：<a :href="requeryUrl" target="_blank" rel="noopener">{{ requeryUrl }}</a>
    </div>
    <div class="ar-space">三、请求头 header</div>
    <div class="ar-space">
      <api-params-input ref="apiHeaderSel" :params="[{desc: '临时字段'}]" />
    </div>
    <div class="ar-space">四、请求参数：</div>
    <div class="ar-space">
      <api-params-input ref="apiParamsSel" :params="params" />
    </div>
    <div class="ar-space rx_no_select">
      <div class="proxy">
        <div
          class="rx-btn-border btn1"
          :class="{ loading: loading }"
          @click="onProxy"
        >
          {{ proxyEnable ? "不使用" : "使用" }}proxy
        </div>
        <div class="tip">仅针对 http  https 有效 </div>
      </div>
      <div class="proxy">
      <div
          class="rx-btn-border btn1"
          :class="{ loading: loading }"
          @click="onCredentials"
        >
          withCredentials{{ !withCredentials ? "不使用（false）" : "使用（true）" }}
        </div>
      </div>
      <div class="rx-btn-border btn" :class="{ loading: loading }" @click="run">
        运行(run)
      </div>
    </div>
    <div class="ar-space">
      <api-result :resopnse="requestRes" />
    </div>
  </div>
</template>

<script>
import apiRunResult from "../utils/api-run-result";

import ApiMethodSelect from "./api-method-select";
import ApiUrlSelect from "./api-url-select";
import ApiParamsInput from "./api-params-input";
import ApiResult from './api-result'

export default {
  components: { ApiMethodSelect, ApiUrlSelect, ApiParamsInput, ApiResult },
  props: {
    method: { type: String, value: "GET" },
    url: { type: String, default: "" },
    params: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      loading: false,
      baseUrl: "",
      requeryUrl: "",
      proxyEnable: false,
      withCredentials: false,
      isUseData: false,

      requestRes: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.getRequeryUrl();
    });
  },
  methods: {
    getRequeryUrl() {
      const apiUrlSel = this.$refs.apiUrlSel || {};
      const _data = apiUrlSel._data || {};
      const urlSel = _data.urlSel || {};
      const baseUrl = urlSel.url || "";
      this.baseUrl = baseUrl;
      this.requeryUrl = baseUrl + this.url;
    },
    onProxy() {
      this.proxyEnable = !this.proxyEnable;
    },
    onCredentials() {
      this.withCredentials = !this.withCredentials
    },
    run() {
      this.loading = true;
      const apiMethodSel = this.$refs.apiMethodSel;
      const method = apiMethodSel._data.selMethod || "GET";

      let proxyEnable = this.proxyEnable
      const url = this.requeryUrl;
      if (this.url === '/' || this.url === './') {
        proxyEnable = false
      }

      const withCredentials = this.withCredentials;
      const apiHeaderSel = this.$refs.apiHeaderSel;
      const headers = apiHeaderSel._data.apiParams;

      const apiParamsSel = this.$refs.apiParamsSel;
      const params = apiParamsSel._data.apiParams;

      console.log("apiMethodSel=", method);
      console.log("apiUrlSel=", url);
      console.log("apiHeaderSel=", headers);
      console.log("apiParamsSel=", params);
      const that = this;
      const timer = Date.now();
      apiRunResult
        .request({ method, url, headers, params, proxyEnable, withCredentials })
        .then((response) => {
          const lastTime = Date.now();
          console.log("response=", response);
          that.loading = false;
          that.requestRes = response
          const runTime = lastTime - timer
          that.requestRes['time'] = runTime + 'ms'
        })
        .catch((error) => {
          const lastTime = Date.now();
          console.error("error=", error);
          that.loading = false;
          that.requestRes = error
          const runTime = lastTime - timer
          that.requestRes['time'] = runTime + 'ms'
        });
    },
  },
};
</script>

<style src="../css-component/style.css"></style>
<style scoped>
.ar-space {
  margin: 5px 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ar-space .btn {
  max-width: 100px;
  background-color: var(--color-blue);
}

.ar-space .btn.loading {
  background-color: var(--color-gray);
}

.ar-space .btn1 {
  margin-bottom: 10px;
}

.ar-space .proxy {
  display: flex;
  align-items: center;
}
.ar-space .proxy .tip {
  margin-left: 10px;
}
</style>